/* eslint-disable no-eval */
/* eslint-disable no-debugger */
/* eslint-disable @typescript-eslint/no-implied-eval */
/* eslint-disable import/no-absolute-path */
/* eslint-disable import/no-unresolved */
/* eslint-disable no-nested-ternary */
/* eslint-disable react/no-array-index-key */
/* eslint-disable array-callback-return */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable no-restricted-syntax */
/* eslint-disable eqeqeq */
/* eslint-disable no-empty */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable import/extensions */
/* eslint-disable promise/catch-or-return */
/* eslint-disable promise/always-return */
/* eslint-disable no-undef */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable import/no-dynamic-require */
/* eslint-disable global-require */
/* eslint-disable react/prop-types */
import React, { useState, useEffect, memo, useRef } from 'react';
import { Button, IconButton, LinearProgress } from '@mui/material';
import TabIcons from '@/renderer/components/TabIcons';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Checkbox from '@mui/material/Checkbox';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import TextField from '@mui/material/TextField';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Modal from '@/renderer/components/Modal';
import IconFont from '@/renderer/components/IconFont';
import fs, { stat } from 'fs';
import Chip from '@mui/material/Chip';
import {
  SendOutlined,
  ArrowDownOutlined,
  EyeFilled,
  PlayCircleOutlined,
  PlusCircleFilled,
  SearchOutlined,
  DeleteFilled,
  CloseOutlined,
  ArrowLeftOutlined,
  CheckCircleFilled,
  MinusCircleFilled,
  EditFilled,
  CopyFilled,
  CloseCircleFilled,
  FullscreenOutlined,
  FullscreenExitOutlined,
} from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { change } from '@/renderer/store/snackbar';
import { Scrollbars } from 'react-custom-scrollbars';
import Typography from '@mui/material/Typography';
import Popover from '@mui/material/Popover';
import Slider from '@mui/material/Slider';
import {
  DndContext,
  useSensor,
  useSensors,
  MouseSensor,
  PointerSensor,
  KeyboardSensor,
  closestCenter,
} from '@dnd-kit/core';
import {
  SortableContext,
  useSortable,
  arrayMove,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Collapse from '@mui/material/Collapse';
import * as template from '@/renderer/utils/template';
import * as Ant5 from 'antd';
import { useFullscreen } from 'ahooks';

const selectoptions = [
  'Split',
  'Input',
  'Password',
  'Money',
  'Textarea',
  'Digit',
  'DigitRange',
  'Date',
  'Time',
  'DateTime',
  'DateWeek',
  'DateMonth',
  'DateQuarter',
  'DateYear',
  'DateRange',
  'TimeRange',
  'DateTimeRange',
  'Select',
  'TreeSelect',
  'Checkbox',
  'Radio',
  'Switch',
  'Cascader',
  'Rate',
  'Slider',
  'UploadBtn',
  'UploadImage',
  'UploadDragger',
  'Editor',
  'FormList',
  'FormSelectList',
];
// 解构props
const ActionAreaCard = memo(
  ({
    dataIndex,
    colProps,
    title,
    setmodal,
    defaultKey,
    valueType,
    setstate,
    state = {},
    mode,
    options = {},
    proxyprefix = '/',
    formItemProps = {},
    alldata,
    hideInSearch,
    hideInTable,
    hideInForm,
    hideInDescriptions,
  }) => {
    const col = { xs: 12 };
    const dispatch = useDispatch();
    const [add, setadd] = useState({
      isadd: false,
      label: '',
      value: '',
    });
    const [links, setlinks] = useState({
      key: '',
      value: '',
    });
    const [hlinks, sethlinks] = useState({
      key: '',
      value: '',
      reverse: false,
    });

    const [popover, setpopover] = useState({
      open: false,
      anchorEl: null,
      onClose: () => {
        setpopover((s) => ({ ...s, open: false }));
      },
    });
    const { attributes, listeners, setNodeRef, transform, transition } =
      useSortable({ id: defaultKey });
    const style = {
      transform: CSS.Transform.toString(transform),
      transition,
    };

    // 入参要修改的key value
    const changeItem = (key, value) => {
      setstate((s) => {
        const newout = s?.saveout
          ? s?.saveout?.map?.((item) => {
              if (item.key == defaultKey) {
                item[key] = value;
              }
              return item;
            })
          : [];
        return {
          ...s,
          saveout: newout,
          out: JSON.stringify(newout, null, '\t'),
          update: Math.random() * 10000,
        };
      });
    };

    // 入参要修改的key value
    const deleteItem = (key) => {
      setstate((s) => {
        const newout = s?.saveout
          ? s?.saveout?.map?.((item) => {
              if (item.key == defaultKey) {
                delete item[key];
              }
              return item;
            })
          : [];
        return {
          ...s,
          saveout: newout,
          out: JSON.stringify(newout, null, '\t'),
          update: Math.random() * 10000,
        };
      });
    };

    const deletecurItem = () => {
      setpopover((s) => ({
        ...s,
        open: false,
        anchorEl: null,
      }));
      setstate((s) => {
        const newout = s?.saveout
          ? s?.saveout?.filter?.((item) => {
              return item.key !== defaultKey;
            })
          : [];
        return {
          ...s,
          saveout: newout,
          out: JSON.stringify(newout, null, '\t'),
          update: Math.random() * 10000,
        };
      });
    };

    return (
      <Grid {...col} ref={setNodeRef} style={style} {...attributes}>
        <Popover
          id={dataIndex}
          {...popover}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
          }}
          transformOrigin={{
            horizontal: 'right',
          }}
        >
          <Typography sx={{ p: 2, backgroundColor: '#666666' }}>
            删除后将不会保留之前配置过的操作{' '}
            <a
              style={{ color: '#ffffff', cursor: 'pointer' }}
              onClick={(e) => {
                deletecurItem();
              }}
            >
              删除
            </a>
          </Typography>
        </Popover>
        <Card
          sx={{
            display: 'flex',
            cursor: 'pointer',
            borderRadius: 3,
            backgroundColor:
              valueType == 'split' ? 'rgba(0, 0, 0, 0.9)' : 'rgba(0,0,0,0.8)',
            overflow: 'visible',
            margin: 2,
            position: 'relative',
            border:
              defaultKey == state.curkey
                ? '1px solid rgba(255,255,255,0.2)'
                : '1px solid rgba(255,255,255,0)',
            transition: 'all 0.4s',
          }}
          onClick={() => {
            // 点击item
            setstate((s) => ({
              ...s,
              curkey: defaultKey,
            }));
          }}
          className="hovercard"
        >
          <div
            className="dragarea"
            style={{
              height: 12,
              position: 'absolute',
              left: 0,
            }}
            {...listeners}
          />
          <Box
            sx={{
              display: 'flex',
              flex: 1,
              flexDirection: 'column',
            }}
          >
            {valueType == 'split' ? (
              <Box
                style={{ flex: '1 0 auto', padding: 12, paddingTop: 28 }}
                className="spread"
              >
                <div style={{ flex: 1 }}>
                  <TextField
                    fullWidth
                    id="outlined-basic"
                    label="分隔符名称"
                    variant="outlined"
                    value={title}
                    onChange={(e) => {
                      const { value } = e.target;
                      changeItem('title', value);
                    }}
                  />
                </div>
                <div
                  style={{
                    flex: 1,
                    display: 'flex',
                    alignItems: 'flex-start',
                    marginLeft: '12px',
                  }}
                >
                  <FormControl fullWidth>
                    <InputLabel id="simple-select-label">组件类型</InputLabel>
                    <Select
                      label="组件类型"
                      labelId="simple-select-label"
                      id="simple-select"
                      value={!valueType ? 'input' : valueType}
                      onChange={(e) => {
                        if (
                          [
                            'select',
                            'treeSelect',
                            'radio',
                            'checkbox',
                            'cascader',
                          ].indexOf(e.target.value) == -1
                        ) {
                          deleteItem('options');
                        }
                        changeItem('valueType', e.target.value);
                      }}
                    >
                      {selectoptions.map((it, i) => {
                        const curvalue =
                          it.charAt(0).toLowerCase() + it.slice(1);
                        return <MenuItem value={curvalue}>{it}</MenuItem>;
                      })}
                    </Select>
                  </FormControl>
                  <IconButton
                    aria-label="previous"
                    size="small"
                    style={{ marginLeft: 12 }}
                    onClick={(e) => {
                      e.stopPropagation();
                      setpopover((s) => ({
                        ...s,
                        open: true,
                        anchorEl: e.currentTarget,
                      }));
                    }}
                  >
                    <CloseOutlined style={{ color: '#fff' }} />
                  </IconButton>
                </div>
              </Box>
            ) : (
              <>
                <Box
                  style={{ flex: '1 0 auto', padding: 12, display: 'flex' }}
                  className="spread"
                >
                  <div className="centerl" style={{ flex: 1 }}>
                    <div className="centerl">
                      <Ant5.Typography.Paragraph
                        editable={{
                          onChange: (val) => {
                            changeItem('title', val);
                          },
                          text: title,
                        }}
                        style={{
                          color: '#fff',
                          fontSize: 16,
                          margin: '0 12px',
                        }}
                      >
                        {!!formItemProps?.rules?.some?.(
                          (it) => it.required === true
                        ) && '*'}{' '}
                        {title}
                      </Ant5.Typography.Paragraph>
                      <FormControlLabel
                        checked={
                          !!formItemProps?.rules?.some?.(
                            (it) => it.required === true
                          )
                        }
                        onChange={(e) => {
                          let newrules = JSON.parse(
                            JSON.stringify(
                              formItemProps?.rules ?? [
                                {
                                  required: e.target.checked,
                                  message: '此项为必填项',
                                },
                              ]
                            )
                          );
                          newrules = newrules.map((it) => {
                            if (Object.keys(it).includes('required')) {
                              it.required = e.target.checked;
                            }
                            return it;
                          });
                          changeItem('formItemProps', {
                            rules: newrules,
                          });
                        }}
                        control={<Switch defaultChecked />}
                        label={<span>必填:</span>}
                        labelPlacement="start"
                      />
                    </div>
                    <span style={{ marginRight: 22, marginLeft: 18 }}>
                      删格:
                    </span>
                    <Slider
                      style={{ width: 240 }}
                      aria-label="Temperature"
                      defaultValue={12}
                      valueLabelDisplay="auto"
                      step={1}
                      marks
                      min={1}
                      max={24}
                      onChange={(e) => {
                        changeItem('colProps', {
                          span: e.target.value,
                        });
                      }}
                    />
                  </div>
                  <IconButton
                    aria-label="previous"
                    size="small"
                    onClick={(e) => {
                      e.stopPropagation();
                      setpopover((s) => ({
                        ...s,
                        open: true,
                        anchorEl: e.currentTarget,
                      }));
                    }}
                  >
                    <CloseOutlined style={{ color: '#fff' }} />
                  </IconButton>
                </Box>
                <Box
                  style={{
                    flex: '1 0 auto',
                    padding: 12,
                    paddingTop: 0,
                    display: 'flex',
                    justifyContent: 'space-between',
                  }}
                >
                  <div>
                    <FormControlLabel
                      checked={hideInSearch}
                      onChange={(e) => {
                        changeItem('hideInSearch', e.target.checked);
                      }}
                      control={<Switch />}
                      label={<span>不查询:</span>}
                      labelPlacement="start"
                    />
                    <FormControlLabel
                      checked={hideInTable}
                      onChange={(e) => {
                        changeItem('hideInTable', e.target.checked);
                      }}
                      control={<Switch />}
                      label={<span>表格不显示:</span>}
                      labelPlacement="start"
                    />
                    <FormControlLabel
                      checked={hideInForm === true}
                      onChange={(e) => {
                        changeItem('hideInForm', e.target.checked);
                      }}
                      control={<Switch />}
                      label={<span>表单不显示:</span>}
                      labelPlacement="start"
                    />
                    <FormControlLabel
                      checked={hideInDescriptions}
                      onChange={(e) => {
                        changeItem('hideInDescriptions', e.target.checked);
                      }}
                      control={<Switch />}
                      label={<span>详情不显示:</span>}
                      labelPlacement="start"
                    />
                  </div>
                  <div
                    style={{
                      backgroundColor: 'rgba(255,255,255,0.2)',
                      borderRadius: 8,
                      height: '100%',
                      marginLeft: 8,
                      paddingRight: 8,
                    }}
                  >
                    <FormControlLabel
                      checked={hideInForm?.constructor === Object}
                      label="表单联动隐藏"
                      labelPlacement="start"
                      onChange={(e) => {
                        if (e.target.checked) {
                          changeItem('hideInForm', {});
                        } else {
                          changeItem('hideInForm', false);
                        }
                      }}
                      control={<Switch />}
                    />
                  </div>
                </Box>
                <div
                  style={{ flex: '1 0 auto', padding: '0 12px 12px 12px' }}
                  className="spread"
                >
                  {hideInForm?.constructor === Object && (
                    <div className="centerl" style={{ flexWrap: 'wrap' }}>
                      {Object.keys(hideInForm)?.map((it, i) => (
                        <Chip
                          label={
                            <span>
                              <b
                                style={{ color: '#FFFFFF', paddingLeft: 8 }}
                                title="隐藏的条件"
                              >
                                {!Array.isArray(hideInForm[it])
                                  ? `当${it}值不在${hideInForm[
                                      it
                                    ]?.reverse.join(',')}中，当前表单隐藏`
                                  : `当${it}值在${hideInForm[it]?.join(
                                      ','
                                    )}中，当前表单隐藏`}
                              </b>
                            </span>
                          }
                          key={it}
                          variant="outlined"
                          style={{ margin: 6 }}
                          onDelete={() => {
                            const newlink = JSON.parse(
                              JSON.stringify(hideInForm)
                            );
                            delete newlink[it];
                            changeItem('hideInForm', {
                              ...newlink,
                            });
                          }}
                        />
                      ))}
                      <Collapse orientation="horizontal" in={hlinks.isadd}>
                        <Chip
                          label={
                            <div className="center">
                              <span>联动dataIndex:</span>
                              <Ant5.Select
                                size="small"
                                style={{
                                  border: 'transparent',
                                  outline: 'none',
                                  borderRadius: 4,
                                  width: 140,
                                  marginRight: 8,
                                }}
                                value={hlinks?.key}
                                onChange={(val) => {
                                  sethlinks((s) => ({
                                    ...s,
                                    key: val,
                                  }));
                                }}
                                options={alldata?.map((it) => {
                                  return {
                                    value: it.key ?? it.dataIndex,
                                    label: it.key ?? it.dataIndex,
                                  };
                                })}
                              />
                              <Ant5.Switch
                                checked={hlinks?.reverse}
                                checkedChildren="不包含"
                                unCheckedChildren="包含"
                                style={{ width: 68 }}
                                onChange={(val) => {
                                  sethlinks((s) => ({
                                    ...s,
                                    reverse: val,
                                  }));
                                }}
                              />
                              <span style={{ marginLeft: 6 }}>值,隔开:</span>
                              <Ant5.Input
                                type="text"
                                size="small"
                                value={hlinks?.value}
                                style={{
                                  border: 'transparent',
                                  outline: 'none',
                                  borderRadius: 4,
                                  width: 140,
                                }}
                                onChange={(e) => {
                                  sethlinks((s) => ({
                                    ...s,
                                    value: e.target.value,
                                  }));
                                }}
                              />
                            </div>
                          }
                          variant="outlined"
                          deleteIcon={
                            <CheckCircleFilled style={{ color: '#fff' }} />
                          }
                          style={{ margin: 6 }}
                          onDelete={() => {
                            if (!hlinks.key || !hlinks.value) {
                              dispatch(
                                change({
                                  open: true,
                                  message: '请选择表单并填写值!',
                                  severity: 'error',
                                })
                              );
                              return;
                            }
                            const resval = hlinks?.reverse
                              ? {
                                  [hlinks.key]: {
                                    reverse: hlinks.value.split(','),
                                  },
                                }
                              : { [hlinks.key]: hlinks.value.split(',') };
                            changeItem('hideInForm', {
                              ...hideInForm,
                              ...resval,
                            });
                            sethlinks((s) => ({
                              ...s,
                              value: null,
                              key: null,
                            }));
                          }}
                        />
                      </Collapse>

                      <IconButton
                        style={{ color: '#FFFFFF' }}
                        onClick={() => {
                          sethlinks((s) => {
                            return {
                              ...s,
                              key: '',
                              value: '',
                              isadd: !s.isadd,
                            };
                          });
                        }}
                      >
                        <PlusCircleFilled
                          rotate={hlinks.isadd ? 45 : 0}
                          className="ani"
                        />
                      </IconButton>
                    </div>
                  )}
                </div>
                <Ant5.Divider
                  style={{
                    backgroundColor: 'rgba(255,255,255,0.2)',
                    margin: '0 0 16px 0',
                  }}
                />
                <Box
                  style={{ flex: '1 0 auto', padding: 12 }}
                  className="spread"
                >
                  <TextField
                    id="outlined-basic"
                    label="DataIndex"
                    variant="outlined"
                    value={dataIndex}
                    fullWidth
                    style={{ marginRight: 12 }}
                    onChange={(e) => {
                      changeItem('dataIndex', e.target.value);
                    }}
                  />
                  <TextField
                    id="outlined-basic"
                    label="Key"
                    variant="outlined"
                    value={defaultKey}
                    fullWidth
                    onChange={(e) => {
                      changeItem('key', e.target.value);
                    }}
                  />
                </Box>
                <Box
                  style={{ flex: '1 0 auto', padding: 12 }}
                  className="spread"
                >
                  <div style={{ flex: 1 }}>
                    <FormControl fullWidth>
                      <InputLabel id="simple-select-label">组件类型</InputLabel>
                      <Select
                        label="组件类型"
                        labelId="simple-select-label"
                        id="simple-select"
                        value={!valueType ? 'input' : valueType}
                        onChange={(e) => {
                          if (
                            [
                              'select',
                              'treeSelect',
                              'radio',
                              'checkbox',
                              'cascader',
                            ].indexOf(e.target.value) == -1
                          ) {
                            deleteItem('options');
                          }
                          changeItem('valueType', e.target.value);
                        }}
                      >
                        {selectoptions.map((it, i) => {
                          const curvalue =
                            it.charAt(0).toLowerCase() + it.slice(1);
                          return <MenuItem value={curvalue}>{it}</MenuItem>;
                        })}
                      </Select>
                    </FormControl>
                  </div>

                  {[
                    'select',
                    'treeSelect',
                    'radio',
                    'checkbox',
                    'cascader',
                  ].includes(valueType) && (
                    <>
                      {['cascader', 'select', 'treeSelect'].includes(
                        valueType
                      ) && (
                        <RadioGroup
                          className="center"
                          row
                          name="type"
                          style={{ marginLeft: 12, flexShrink: 0 }}
                          value={mode}
                          onChange={(e) => {
                            changeItem('mode', e.target.value);
                          }}
                        >
                          <FormControlLabel
                            control={<Radio value="radio" color="primary" />}
                            label="单选"
                          />
                          <FormControlLabel
                            control={<Radio value="multiple" color="primary" />}
                            label="多选"
                          />
                          {valueType == 'select' && (
                            <FormControlLabel
                              control={<Radio value="tags" color="primary" />}
                              label="tags模式"
                            />
                          )}
                        </RadioGroup>
                      )}

                      <RadioGroup
                        className="center"
                        row
                        name="type"
                        style={{ marginLeft: 12, flexShrink: 0 }}
                        value={
                          Array.isArray(options)
                            ? '1'
                            : options.path
                            ? '2'
                            : null
                        }
                        onChange={(e) => {
                          if (e.target.value == '1') {
                            const optionse = [];
                            changeItem('options', optionse);
                          } else {
                            const optionse = {
                              path: proxyprefix,
                              params: {},
                            };
                            changeItem('options', optionse);
                          }
                        }}
                      >
                        {valueType != 'treeSelect' && (
                          <FormControlLabel
                            control={<Radio value="1" color="primary" />}
                            label="列表"
                          />
                        )}
                        <FormControlLabel
                          control={<Radio value="2" color="primary" />}
                          label="接口"
                        />
                      </RadioGroup>
                    </>
                  )}
                </Box>
                {[
                  'select',
                  'treeSelect',
                  'radio',
                  'checkbox',
                  'cascader',
                ].includes(valueType) && (
                  <>
                    <Box
                      style={{ flex: '1 0 auto', padding: 12, paddingTop: 0 }}
                      className="spread"
                    >
                      {Array.isArray(options) && (
                        <div className="centerl" style={{ flexWrap: 'wrap' }}>
                          {options?.map((it) => (
                            <Chip
                              label={it.label}
                              key={it.value}
                              variant="outlined"
                              style={{ margin: 6 }}
                              onDelete={() => {
                                changeItem(
                                  'options',
                                  options.filter(
                                    (its) => its.value !== it.value
                                  )
                                );
                              }}
                            />
                          ))}
                          <Collapse orientation="horizontal" in={add.isadd}>
                            <Chip
                              label={
                                <div className="center">
                                  <span>label:</span>
                                  <Ant5.Input
                                    type="text"
                                    size="small"
                                    value={add?.label}
                                    style={{
                                      border: 'transparent',
                                      outline: 'none',
                                      borderRadius: 4,
                                      width: 140,
                                      marginRight: 8,
                                    }}
                                    onChange={(e) => {
                                      setadd((s) => ({
                                        ...s,
                                        label: e.target.value,
                                      }));
                                    }}
                                  />
                                  <span>value:</span>
                                  <Ant5.Input
                                    type="text"
                                    size="small"
                                    value={add?.value}
                                    style={{
                                      border: 'transparent',
                                      outline: 'none',
                                      borderRadius: 4,
                                      width: 140,
                                    }}
                                    onChange={(e) => {
                                      setadd((s) => ({
                                        ...s,
                                        value: e.target.value,
                                      }));
                                    }}
                                  />
                                </div>
                              }
                              variant="outlined"
                              deleteIcon={
                                <CheckCircleFilled style={{ color: '#fff' }} />
                              }
                              style={{ margin: 6 }}
                              onDelete={() => {
                                if (
                                  options.some((it) => it.value == add.value)
                                ) {
                                  dispatch(
                                    change({
                                      open: true,
                                      message: 'value已重复!',
                                      severity: 'error',
                                    })
                                  );
                                  return;
                                }
                                setadd((s) => ({
                                  ...s,
                                  label: '',
                                  value: '',
                                }));
                                changeItem('options', [
                                  ...options,
                                  {
                                    label: add.label,
                                    value: add.value,
                                  },
                                ]);
                              }}
                            />
                          </Collapse>

                          <IconButton
                            style={{ color: '#FFFFFF' }}
                            onClick={() => {
                              setadd((s) => {
                                return {
                                  label: '',
                                  value: '',
                                  isadd: !s.isadd,
                                };
                              });
                            }}
                          >
                            <PlusCircleFilled
                              rotate={add.isadd ? 45 : 0}
                              className="ani"
                            />
                          </IconButton>
                        </div>
                      )}
                      {Object.keys(options).includes('path') && (
                        <>
                          <TextField
                            id="filled-multiline-flexible"
                            label="数据接口地址"
                            fullWidth
                            autoFocus
                            value={options.path}
                            onChange={(e) => {
                              changeItem('options', {
                                ...options,
                                path: e.target.value,
                              });
                            }}
                            variant="filled"
                          />
                          <div
                            style={{
                              width: 130,
                              backgroundColor: 'rgba(255,255,255,0.2)',
                              borderRadius: 8,
                              height: '100%',
                              marginLeft: 8,
                              paddingRight: 8,
                            }}
                            className="center"
                          >
                            <FormControlLabel
                              checked={Object.keys(options).includes(
                                'linkParams'
                              )}
                              label="联动"
                              labelPlacement="start"
                              onChange={(e) => {
                                if (e.target.checked) {
                                  changeItem('options', {
                                    path: options.path,
                                    linkParams: {},
                                  });
                                } else {
                                  changeItem('options', {
                                    path: options.path,
                                    params: {},
                                  });
                                }
                              }}
                              control={<Switch />}
                            />
                          </div>
                        </>
                      )}
                    </Box>

                    <Box
                      style={{ flex: '1 0 auto', padding: 12, paddingTop: 0 }}
                      className="spread"
                    >
                      {Object.keys(options).includes('linkParams') && (
                        <div className="centerl" style={{ flexWrap: 'wrap' }}>
                          {Object.keys(options.linkParams)?.map((it, i) => (
                            <Chip
                              label={
                                <span>
                                  <b title="dataIndex(联动表单的name)">{it}</b>
                                  <b
                                    style={{ color: '#FFFFFF', paddingLeft: 8 }}
                                    title="key(调用接口传给后端的key)"
                                  >
                                    {options.linkParams[it] ?? it}
                                  </b>
                                </span>
                              }
                              key={it}
                              variant="outlined"
                              style={{ margin: 6 }}
                              onDelete={() => {
                                const newlink = JSON.parse(
                                  JSON.stringify(options?.linkParams)
                                );
                                delete newlink[it];
                                changeItem('options', {
                                  ...options,
                                  linkParams: newlink,
                                });
                              }}
                            />
                          ))}
                          <Collapse orientation="horizontal" in={links.isadd}>
                            <Chip
                              label={
                                <div className="center">
                                  <span>联动dataIndex:</span>
                                  <Ant5.Select
                                    size="small"
                                    style={{
                                      border: 'transparent',
                                      outline: 'none',
                                      borderRadius: 4,
                                      width: 140,
                                      marginRight: 8,
                                    }}
                                    value={links?.key}
                                    onChange={(val) => {
                                      setlinks((s) => ({
                                        ...s,
                                        key: val,
                                      }));
                                    }}
                                    options={alldata?.map((it) => {
                                      return {
                                        value: it.key ?? it.dataIndex,
                                        label: it.key ?? it.dataIndex,
                                      };
                                    })}
                                  />
                                  <span>传参key:</span>
                                  <Ant5.Input
                                    type="text"
                                    size="small"
                                    value={links?.value}
                                    style={{
                                      border: 'transparent',
                                      outline: 'none',
                                      borderRadius: 4,
                                      width: 140,
                                    }}
                                    onChange={(e) => {
                                      setlinks((s) => ({
                                        ...s,
                                        value: e.target.value,
                                      }));
                                    }}
                                  />
                                </div>
                              }
                              variant="outlined"
                              deleteIcon={
                                <CheckCircleFilled style={{ color: '#fff' }} />
                              }
                              style={{ margin: 6 }}
                              onDelete={() => {
                                if (!links.key) {
                                  dispatch(
                                    change({
                                      open: true,
                                      message: '选择联动表单!',
                                      severity: 'error',
                                    })
                                  );
                                  return;
                                }
                                changeItem('options', {
                                  ...options,
                                  linkParams: {
                                    ...options.linkParams,
                                    [links.key]: links.value,
                                  },
                                });
                                setlinks((s) => ({
                                  ...s,
                                  value: null,
                                  key: null,
                                }));
                              }}
                            />
                          </Collapse>

                          <IconButton
                            style={{ color: '#FFFFFF' }}
                            onClick={() => {
                              setlinks((s) => {
                                return {
                                  key: '',
                                  value: '',
                                  isadd: !s.isadd,
                                };
                              });
                            }}
                          >
                            <PlusCircleFilled
                              rotate={links.isadd ? 45 : 0}
                              className="ani"
                            />
                          </IconButton>
                        </div>
                      )}
                    </Box>
                  </>
                )}
              </>
            )}
          </Box>
        </Card>
      </Grid>
    );
  }
);

const defaultpath = {
  enableadd: true,
  enableedit: true,
  enabledelete: true,
  enabledetail: true,
  add: '',
  edit: '',
  list: '',
  delete: '',
  detail: '',
};

function Editcroboard({ localPath, curitem, prodata, arg }) {
  // drag
  const mouseSensor = useSensor(MouseSensor, {
    coordinateGetter: sortableKeyboardCoordinates,
    activationConstraint: {
      distance: 8,
    },
  });
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    }),
    mouseSensor
  );
  // drag end

  const dispatch = useDispatch();
  const [collspan, setcollspan] = useState(false);
  const [fullscreen, setfullscreen] = useState(false);
  const [actives, setactives] = useState(0);
  const [config, setconfig] = useState({
    tab: false,
    tablist: [],
    activetab: 0,
  });
  const [modalprops, setmodal] = useState({
    open: false,
    reload: false,
  });
  const [state, setstate] = useState({
    in: undefined,
    out: undefined,
    saveout: [],
  });
  const [pathconfig, setpath] = useState(defaultpath);

  const [spinning, setSpinning] = useState(false);
  const fullref = useRef(null);
  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] =
    useFullscreen(fullref);

  function setDefaultColumns(columnes = []) {
    const formatcol = columnes?.map?.((it) => {
      if (!it.key) {
        it.key = it.dataIndex ?? it.title;
      }
      return it;
    });
    setstate((s) => ({
      ...s,
      out: JSON.stringify(formatcol, null, '\t'),
      saveout: formatcol,
    }));
  }

  async function getColumns() {
    setSpinning(true);
    // columns获取
    const data = await fs.readFileSync(
      `${localPath}/src/pages${curitem.path}/columns.js`,
      'utf8',
      (err, data) => {
        if (err) {
          setSpinning('fail');
        }
      }
    );
    setSpinning(false);

    if (data) {
      const re = /{[\S\s]*}/;
      const match = data.match(re);
      const step1 = match[0].replace(/\s*/g, '').substring(7);
      const step2 = step1.substring(0, step1.length - 2);
      try {
        const res = eval(`(${step2})`);
        if (Array.isArray(res)) {
          setconfig({
            tab: true,
            tablist: res,
            activetab: res[0].key,
          });
        } else {
          setconfig({
            tab: false,
            tablist: [],
            activetab: 0,
          });
          setDefaultColumns(res?.columns);
          setpath(res?.pathconfig);
        }
      } catch (error) {
        dispatch(
          change({
            open: true,
            message: 'columns返回值需以JSON格式编写!',
            severity: 'error',
          })
        );
      }
    }

    // fs.writeFile(
    //   '/Users/wuhao/Library/Application Support/app.js',
    //   data,
    //   'utf8',
    //   (error) => {
    //     if (error) {
    //       console.log('====================================');
    //       console.log(error);
    //       console.log('====================================');
    //       return;
    //     }
    //     try {
    //       let datas = {};
    //       datas = require('/Users/wuhao/Library/Application Support/app.js');
    //       const res = datas?.default?.();
    //       console.log(res, 11111);

    //       if (Array.isArray(res)) {
    //         setconfig({
    //           tab: true,
    //           tablist: res,
    //           activetab: res[0].key,
    //         });
    //       } else {
    //         setconfig({
    //           tab: false,
    //           tablist: [],
    //           activetab: 0,
    //         });
    //         setDefaultColumns(res?.columns);
    //         setpath(res?.pathconfig);
    //       }
    //     } catch (error) {}
    //   }
    // );
  }

  useEffect(() => {
    if (!localPath || !curitem.component) return;
    getColumns();
  }, [localPath, curitem.path]);

  // 切换设置columns
  useEffect(() => {
    if (config?.tab === true && config?.tablist.length > 0) {
      const curcolumns =
        config?.tablist?.filter((it) => it.key == config?.activetab)[0] ?? {};
      setDefaultColumns(curcolumns?.columns ?? []);
      setpath(curcolumns?.pathconfig ?? defaultpath);
    }
  }, [config?.activetab]);

  useEffect(() => {
    if (!config.tab || !config.tablist) {
      return;
    }
    setconfig((s) => {
      return {
        ...s,
        tablist: s?.tablist?.map?.((it) => {
          if (it.key == s.activetab) {
            it.columns = state?.saveout ?? [];
            it.pathconfig = pathconfig;
          }
          return it;
        }),
      };
    });
  }, [state?.update, pathconfig]);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    if (modalprops?.title === '新增tabs') {
      const tab = data.get('label');
      const key = data.get('key');
      const checked = data.get('checked');
      const adds = checked
        ? { tab, key, columns: state?.saveout, pathconfig }
        : { tab, key };
      if (config.tablist.some((it) => it.key === key)) {
        dispatch(
          change({
            open: true,
            message: 'Key已重复!',
            severity: 'error',
          })
        );
        return;
      }
      if (!key || !tab) {
        dispatch(
          change({
            open: true,
            message: '请填写唯一值与名称!',
            severity: 'error',
          })
        );
        return;
      }
      setconfig((s) => {
        const newtablist = JSON.parse(JSON.stringify(s.tablist));
        return {
          ...s,
          tablist: [...newtablist, adds],
          activetab: key,
        };
      });
    } else if (modalprops?.title === '新增表单项') {
      const dataIndex = data.get('dataIndex');
      const key = data.get('key');
      const title = data.get('title');
      const valueType = data.get('valueType');
      if (!key || !title || !dataIndex || !valueType) {
        dispatch(
          change({
            open: true,
            message: '请填写唯一值与名称!',
            severity: 'error',
          })
        );
        return;
      }
      setstate((s) => {
        let index = s?.saveout?.length ?? 0;
        const newout = s?.saveout
          ? s?.saveout?.map?.((item, i) => {
              if (item.key == state.curkey) {
                index = i;
              }
              return item;
            })
          : [];

        newout.splice(index + 1, 0, {
          dataIndex,
          valueType,
          title,
          key,
        });

        return {
          ...s,
          saveout: newout,
          out: JSON.stringify(newout, null, '\t'),
          update: Math.random() * 10000,
        };
      });
    }
  };

  function handleDragEnd(event) {
    const { active, over } = event;
    if (active.id !== over.id) {
      setstate((s) => {
        const news = JSON.parse(JSON.stringify(s)) ?? [];
        const itemes = news.saveout;
        const keyarr = itemes.map((it) => it.key);
        const oldIndex = keyarr?.indexOf?.(active.id);
        const newIndex = keyarr?.indexOf?.(over.id);
        const newsaveout = arrayMove(itemes, oldIndex, newIndex);
        return {
          ...s,
          saveout: newsaveout,
          out: JSON.stringify(newsaveout, null, '\t'),
          update: Math.random() * 10000,
        };
      });
    }
  }

  return spinning === 'fail' ? (
    <div className="center" style={{ height: '100%', width: '100%' }}>
      未读取到配置文件...
    </div>
  ) : curitem?.path ? (
    <Ant5.Spin spinning={spinning === true} wrapperClassName="diys">
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragEnd={handleDragEnd}
        className="columns"
      >
        <div style={{ overflowX: 'hidden' }} ref={fullref}>
          <div className="spread" style={{ alignItems: 'flex-start' }}>
            <div className="centerl" style={{ flex: 1 }}>
              <b style={{ fontSize: 18, marginRight: 20 }}>
                {curitem.name}
                <span style={{ fontSize: 16 }}>{curitem.path}</span>
              </b>
              <TabIcons
                style={{ width: 78, marginRight: 18 }}
                tablist={[
                  {
                    icon: 'icon-table',
                    path: 'table',
                  },
                  {
                    icon: 'icon-form',
                    path: 'form',
                  },
                  // {
                  //   icon: 'icon-detail-fill',
                  //   path: 'detail',
                  // },
                ]}
                active={actives}
                setactive={setactives}
              />
            </div>
            <div
              style={{
                flex: 1,
                padding: 4,
                display: 'flex',
                justifyContent: 'flex-end',
                alignItems: 'center',
              }}
            >
              <FormGroup row>
                <FormControlLabel
                  checked={config.tab}
                  onChange={(e) => {
                    setconfig((s) => ({ ...s, tab: e.target.checked }));
                  }}
                  control={<Switch defaultChecked />}
                  label="多Tab"
                  labelPlacement="start"
                />
                {config.tab && (
                  <IconButton
                    style={{
                      color: 'rgba(255, 255, 255, 0.5)',
                      marginLeft: 8,
                    }}
                    size="small"
                    onClick={() => {
                      setmodal((s) => ({
                        ...s,
                        open: true,
                        title: `新增tabs`,
                        curitem: null,
                      }));
                    }}
                  >
                    <PlusCircleFilled />
                  </IconButton>
                )}
              </FormGroup>

              <Button
                startIcon={
                  !fullscreen ? (
                    <FullscreenOutlined
                      style={{ color: '#ffffff', paddingLeft: 8 }}
                    />
                  ) : (
                    <FullscreenExitOutlined
                      style={{ color: '#ffffff', paddingLeft: 8 }}
                    />
                  )
                }
                style={{ marginLeft: 18 }}
                onClick={(e) => {
                  e.stopPropagation();
                  setfullscreen(!fullscreen);
                  if (!fullscreen) {
                    enterFullscreen();
                  } else {
                    exitFullscreen();
                  }
                }}
              >
                {!fullscreen ? '全屏' : '取消全屏'}
              </Button>
              <Button
                style={{ paddingLeft: 12, marginLeft: 20 }}
                startIcon={<IconFont type="icon-form" />}
                onClick={async () => {
                  const writedata = template.setcolumns(
                    config,
                    state?.saveout,
                    pathconfig
                  );
                  await fs.writeFileSync(
                    `${localPath}/src/pages${curitem.path}/columns.js`,
                    writedata,
                    'utf8',
                    (error) => {
                      if (error) {
                        dispatch(
                          change({
                            open: true,
                            message: '文件写入失败!',
                            severity: 'error',
                          })
                        );
                      } else {
                        dispatch(
                          change({
                            open: true,
                            message: 'cloumns文件写入成功!',
                            severity: 'success',
                          })
                        );
                      }
                    }
                  );
                  const { name, path } = curitem || { path: '' };
                  const comparr = path.split('/');
                  const tmp = comparr[comparr.length - 1];
                  const compName = tmp.charAt(0).toUpperCase() + tmp.slice(1);
                  const filestrs = template.settablecrud(
                    name,
                    compName,
                    config,
                    pathconfig
                  );
                  await fs.writeFileSync(
                    `${localPath}/src/pages${curitem.path}/index.jsx`,
                    filestrs,
                    'utf8',
                    (error) => {
                      if (error) {
                        dispatch(
                          change({
                            open: true,
                            message: '文件写入失败!',
                            severity: 'error',
                          })
                        );
                      } else {
                        dispatch(
                          change({
                            open: true,
                            message: '文件写入成功!',
                            severity: 'success',
                          })
                        );
                      }
                    }
                  );
                }}
              >
                写入文件
              </Button>
            </div>
          </div>
          {config.tab && config.tablist.length > 0 && (
            <Tabs
              value={config.activetab}
              onChange={(e, v) => {
                setconfig((s) => ({
                  ...s,
                  activetab: v,
                }));
              }}
              aria-label="basic tabs example"
              variant="scrollable"
              scrollButtons="auto"
              selectionFollowsFocus
            >
              {config.tablist?.map((it, i) => {
                return (
                  <Tab
                    key={it.key}
                    label={
                      <div>
                        {it.tab}
                        <CloseOutlined
                          style={{ marginLeft: 12 }}
                          onClick={() => {
                            if (config.tablist.length == 1) {
                              dispatch(
                                change({
                                  open: true,
                                  message: '至少保留一个tab!',
                                  severity: 'error',
                                })
                              );
                              return;
                            }
                            setconfig((s) => {
                              const newlist = s.tablist?.filter(
                                (item) => item.key != it.key
                              );
                              return {
                                ...s,
                                tablist: newlist,
                                activetab: newlist[0].key,
                              };
                            });
                          }}
                        />
                      </div>
                    }
                    value={it.key}
                  />
                );
              })}
            </Tabs>
          )}
          {actives == 0 && (
            <Grid container spacing={2} style={{ marginTop: 0 }}>
              <Grid
                item
                xs={8}
                style={{
                  paddingTop:
                    config?.tab && config?.tablist?.length > 0 ? 0 : 16,
                }}
              >
                <Box
                  sx={{
                    bgcolor: '#444444',
                    borderRadius: '0 0 8px 8px',
                    overflow: 'hidden',
                    height: fullscreen
                      ? `calc(100vh - 100px)`
                      : config?.tab && config?.tablist?.length > 0
                      ? `calc(100vh - 345px)`
                      : `calc(100vh - 310px)`,
                    background: `url(${require('@/renderer/assets/sites.jpg')}) no-repeat center`,
                    backgroundSize: 'cover',
                    display: 'flex',
                    flexDirection: 'column',
                    transition: 'all 0.4s',
                  }}
                >
                  <div
                    style={{
                      height: collspan ? 100 : 288,
                      position: 'relative',
                      transition: 'all 0.4s',
                      padding: 12,
                      overflow: 'hidden',
                    }}
                  >
                    <Scrollbars
                      thumbMinSize={10}
                      autoHide
                      style={{
                        width: '100%',
                        height: '100%',
                      }}
                      hideTracksWhenNotNeeded
                    >
                      <div
                        style={{
                          backgroundColor: 'rgba(0,0,0,0.5)',
                          backdropFilter: 'blur(2px)',
                        }}
                      >
                        <TextField
                          id="filled-multiline-flexible"
                          label="接口数据解析"
                          fullWidth
                          multiline
                          maxRows={1000}
                          minRows={30}
                          autoFocus
                          value={state.in}
                          onChange={(e) => {
                            setstate({
                              ...state,
                              in: e.target.value,
                            });
                          }}
                          variant="filled"
                        />
                      </div>
                    </Scrollbars>
                    <Button
                      style={{ position: 'absolute', right: 58, bottom: 15 }}
                      onClick={() => {
                        const defins = state.in;
                        if (defins) {
                          const defin = JSON.parse(
                            defins
                              .replace(/\s+/g, '')
                              .replace(/<\/?.+?>/g, '')
                              .replace(/[\r\n]/g, '')
                          );
                          if (defin.constructor === Object) {
                            const out = [];
                            for (const i in defin) {
                              if (!defin[i]) {
                              } else {
                                out.push({
                                  title: defin[i],
                                  dataIndex: i,
                                  key: i,
                                });
                              }
                            }
                            setstate({
                              ...state,
                              saveout: out,
                              out: JSON.stringify(out, null, '\t'),
                              update: Math.random() * 10000,
                            });
                            setcollspan(true);
                          } else {
                            dispatch(
                              change({
                                open: true,
                                message: '格式有误!',
                                severity: 'error',
                              })
                            );
                          }
                        } else {
                          dispatch(
                            change({
                              open: true,
                              message: '没东西别乱点!',
                              severity: 'error',
                            })
                          );
                        }
                      }}
                      startIcon={<SendOutlined style={{ fontSize: 12 }} />}
                    >
                      解析数据
                    </Button>

                    <IconButton
                      style={{
                        position: 'absolute',
                        right: 15,
                        bottom: 15,
                        color: '#ffffff',
                      }}
                      onClick={() => {
                        setmodal((s) => ({
                          ...s,
                          open: true,
                          title: `新增表单项`,
                          curitem: null,
                        }));
                      }}
                    >
                      <PlusCircleFilled />
                    </IconButton>

                    <Button
                      startIcon={
                        <ArrowDownOutlined
                          rotate={collspan ? 0 : 180}
                          style={{ color: '#ffffff', transition: 'all 0.4s' }}
                        />
                      }
                      style={{ position: 'absolute', left: 15, bottom: 15 }}
                      onClick={(e) => {
                        e.stopPropagation();
                        setcollspan(!collspan);
                      }}
                    >
                      {collspan ? '展开' : '收起'}
                    </Button>
                  </div>
                  <div style={{ flex: 2 }}>
                    <Scrollbars
                      thumbMinSize={10}
                      autoHide
                      style={{
                        width: '100%',
                        height: '100%',
                      }}
                      hideTracksWhenNotNeeded
                    >
                      <SortableContext
                        items={state?.saveout?.map((it, i) => it?.key)}
                        strategy={verticalListSortingStrategy}
                      >
                        {state?.saveout?.map((it, i) => {
                          return (
                            <ActionAreaCard
                              defaultKey={it?.key}
                              id={it?.key}
                              state={state}
                              setstate={setstate}
                              {...it}
                              proxyprefix={prodata.proxy_string}
                              alldata={state?.saveout}
                              key={i}
                            />
                          );
                        })}
                      </SortableContext>
                    </Scrollbars>
                  </div>
                </Box>
              </Grid>
              <Grid
                item
                xs={4}
                style={{
                  paddingTop:
                    config?.tab && config?.tablist?.length > 0 ? 0 : 16,
                }}
              >
                <Box
                  sx={{
                    bgcolor: '#333333',
                    borderRadius: 3,
                    overflow: 'hidden',
                    height: fullscreen
                      ? `calc(100vh - 100px)`
                      : config?.tab && config?.tablist?.length > 0
                      ? `calc(100vh - 345px)`
                      : `calc(100vh - 310px)`,
                    backgroundSize: 'cover',
                    transition: 'all 0.4s',
                    position: 'relative',
                  }}
                >
                  <IconButton
                    size="small"
                    style={{
                      position: 'absolute',
                      right: 15,
                      top: 15,
                      color: '#ffffff',
                      zIndex: 999999,
                    }}
                    onClick={() => {
                      const inputElement = document.getElementById('copy');
                      inputElement.select();
                      document.execCommand('copy');
                    }}
                  >
                    <CopyFilled />
                  </IconButton>
                  <Scrollbars
                    thumbMinSize={10}
                    autoHide
                    style={{
                      width: '100%',
                      height: '100%',
                    }}
                    hideTracksWhenNotNeeded
                  >
                    <div style={{ whiteSpace: 'pre-wrap', width: '200%' }}>
                      <code style={{ whiteSpace: 'pre-wrap', width: '200%' }}>
                        {state.out}
                      </code>
                      <input
                        type="text"
                        value={state.out}
                        id="copy"
                        style={{ transform: 'scale(0)' }}
                      />
                    </div>
                  </Scrollbars>
                </Box>
              </Grid>
            </Grid>
          )}
          {actives == 1 && (
            <div
              style={{
                padding: '20px 8px 8px 8px',
              }}
            >
              <div>
                <div style={{ width: 80 }}>
                  <Ant5.Switch
                    style={{ width: 66 }}
                    checkedChildren="启用"
                    unCheckedChildren="停用"
                    checked={pathconfig?.enableadd}
                    onChange={(val) => {
                      setpath((s) => ({
                        ...s,
                        enableadd: val,
                      }));
                    }}
                  />
                </div>
                <TextField
                  disabled={!pathconfig?.enableadd}
                  style={{ marginTop: 20 }}
                  fullWidth
                  label="新增接口"
                  value={pathconfig?.add}
                  onChange={(e) => {
                    setpath((s) => ({
                      ...s,
                      add: e.target.value,
                    }));
                  }}
                />
              </div>

              <div style={{ marginTop: 20 }}>
                <div style={{ width: 80 }}>
                  <Ant5.Switch
                    style={{ width: 66 }}
                    checkedChildren="启用"
                    unCheckedChildren="停用"
                    checked={pathconfig?.enableedit}
                    onChange={(val) => {
                      setpath((s) => ({
                        ...s,
                        enableedit: val,
                      }));
                    }}
                  />
                </div>
                <TextField
                  disabled={!pathconfig?.enableedit}
                  style={{ marginTop: 20 }}
                  fullWidth
                  label="编辑接口"
                  value={pathconfig?.edit}
                  onChange={(e) => {
                    setpath((s) => ({
                      ...s,
                      edit: e.target.value,
                    }));
                  }}
                />
              </div>

              <div style={{ marginTop: 20 }}>
                <div style={{ width: 80 }}>
                  <Ant5.Switch
                    style={{ width: 66 }}
                    checkedChildren="启用"
                    unCheckedChildren="停用"
                    checked={pathconfig?.enabledelete}
                    onChange={(val) => {
                      setpath((s) => ({
                        ...s,
                        enabledelete: val,
                      }));
                    }}
                  />
                </div>
                <TextField
                  disabled={!pathconfig?.enabledelete}
                  style={{ marginTop: 20 }}
                  fullWidth
                  label="删除接口"
                  value={pathconfig?.delete}
                  onChange={(e) => {
                    setpath((s) => ({
                      ...s,
                      delete: e.target.value,
                    }));
                  }}
                />
              </div>

              <div style={{ marginTop: 20 }}>
                <div style={{ width: 80 }}>
                  <Ant5.Switch
                    style={{ width: 66 }}
                    checkedChildren="启用"
                    unCheckedChildren="停用"
                    checked={pathconfig?.enabledetail}
                    onChange={(val) => {
                      setpath((s) => ({
                        ...s,
                        enabledetail: val,
                      }));
                    }}
                  />
                </div>
                <TextField
                  disabled={!pathconfig?.enabledetail}
                  style={{ marginTop: 20 }}
                  fullWidth
                  label="详情接口"
                  value={pathconfig?.detail}
                  onChange={(e) => {
                    setpath((s) => ({
                      ...s,
                      detail: e.target.value,
                    }));
                  }}
                />
              </div>

              <div style={{ marginTop: 20 }}>
                <TextField
                  style={{ marginTop: 20 }}
                  fullWidth
                  label="页面列表"
                  value={pathconfig?.list}
                  onChange={(e) => {
                    setpath((s) => ({
                      ...s,
                      list: e.target.value,
                    }));
                  }}
                />
              </div>
            </div>
          )}

          <Modal
            {...modalprops}
            onClose={() => {
              setmodal((s) => ({
                ...s,
                open: false,
              }));
            }}
            onOk={() => {
              // 页面数据是否存数据库
            }}
            footer={false}
          >
            <Box
              component="form"
              noValidate
              onSubmit={handleSubmit}
              sx={{ mt: 3 }}
            >
              {modalprops?.title === '新增tabs' ? (
                <Grid container spacing={2}>
                  <Grid item xs={12} mt={2}>
                    <TextField
                      autoComplete="label"
                      name="label"
                      required
                      fullWidth
                      id="label"
                      label="名称"
                      autoFocus
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      required
                      fullWidth
                      id="key"
                      label="唯一值key"
                      name="key"
                      autoComplete="key"
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <span style={{ paddingTop: 6, paddingRight: 12 }}>
                      复制当前配置
                    </span>
                    <FormControlLabel
                      name="checked"
                      control={<Switch defaultChecked />}
                    />
                  </Grid>
                </Grid>
              ) : (
                <Grid container spacing={2}>
                  <Grid item xs={12} mt={2}>
                    <TextField
                      autoComplete="title"
                      name="title"
                      required
                      fullWidth
                      id="title"
                      label="名称"
                      autoFocus
                    />
                  </Grid>
                  <Grid item xs={12} mt={2}>
                    <TextField
                      autoComplete="key"
                      name="key"
                      required
                      fullWidth
                      id="key"
                      label="key"
                      autoFocus
                    />
                  </Grid>
                  <Grid item xs={12} mt={2}>
                    <TextField
                      autoComplete="dataIndex"
                      name="dataIndex"
                      required
                      fullWidth
                      id="dataIndex"
                      label="dataIndex"
                      autoFocus
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <FormControl fullWidth required>
                      <InputLabel id="simple-select-label">组件类型</InputLabel>
                      <Select
                        autoComplete="valueType"
                        name="valueType"
                        id="valueType"
                        label="组件类型"
                      >
                        {selectoptions.map((it, i) => {
                          const curvalue =
                            it.charAt(0).toLowerCase() + it.slice(1);
                          return <MenuItem value={curvalue}>{it}</MenuItem>;
                        })}
                      </Select>
                    </FormControl>
                  </Grid>
                </Grid>
              )}

              <Button
                type="submit"
                fullWidth
                sx={{ mt: 3, mb: 2, bgcolor: '#666', color: '#ffffff' }}
                variant="contained"
                size="large"
              >
                确定
              </Button>
            </Box>
          </Modal>
        </div>
      </DndContext>
    </Ant5.Spin>
  ) : (
    <div className="center" style={{ height: '100%', width: '100%' }}>
      请选择页面...
    </div>
  );
}

export default Editcroboard;
